<%@page import="cn.edu.pku.wxlib.user.model.*" %>

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags/simpletable" prefix="simpletable"%>
<%@ include file="/commons/taglibs.jsp" %>

<rapid:override name="head">
	<title>用户信息管理</title>
</rapid:override>

<rapid:override name="content">
	<form id="queryForm" name="queryForm" method="get"
		style="display: block;">
		<!-- start of search -->
		<div class="search">
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input type="text"
					class="form-field col-1-5" value="${query.userName}"
					id="userName" name="userName" placeholder="输入用户名">
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input type="text"
					class="form-field col-1-5" value="${query.name}"
					id="name" name="name" placeholder="输入姓名">
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input type="text"
					class="form-field col-1-5" value="${query.tel}"
					id="tel" name="tel" placeholder="输入座机号">
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input type="text"
					class="form-field col-1-5" value="${query.phone}"
					id="phone" name="phone" placeholder="输入手机号">
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input type="text"
					class="form-field col-1-5" value="${query.email}"
					id="email" name="email" placeholder="输入邮箱">
			</div>
			<div class="form-group inline">
            <select id="type" class="form-field">
                <option value="">用户类型</option>
                <option value="1">老师</option>
                <option value="2">学生</option>
            </select>
            <div class="form-group inline">
            	<!--<i class="icon-exclamation-sign"></i>--> 
            	<select id="gender" name="gender" class="form-field">
                	<option value="">性别</option>
                	<option value="1">男</option>
                	<option value="2">女</option>
            	</select>
        	</div>
        	</div>
        	<div class="form-group inline">
            <select id="state" class="form-field">
                <option value="">用户状态</option>
                <option value="0">禁用</option>
                <option value="1">启用</option>
            </select>
        	</div>
			<div class="form-group inline icon">
            	<i class="icon-calendar"></i>
            	<input placeholder="出生年月日开始" type="text" value="${query.birthBegin}" id="birthBegin" name="birthBegin" class="form-field"/>
        	</div>
            <strong>至</strong>
       		<div class="form-group inline icon">
            	<i class="icon-calendar"></i>
            	<input placeholder="出生年月日结束" type="text" value="${query.birthEnd}"  id="birthEnd" name="birthEnd" class="form-field"   />
        	</div>
			<div class="form-group inline icon search-btn"
				onclick="$('#queryForm').submit();" title="查询">
				<i class="icon-search"></i>
			</div>

		</div>
		<!-- end of search -->
	</form>
	
		<div class="handleControl">
			<div class="form-group inline">
				<button type="button" class="btn btn-primary" onclick="window.location = '${ctx}/user/2/new'">&nbsp;&nbsp;&nbsp;新增学生&nbsp;&nbsp;&nbsp;</button>
				<button type="button" class="btn btn-primary" onclick="window.location = '${ctx}/user/1/new'">&nbsp;&nbsp;&nbsp;新增老师&nbsp;&nbsp;&nbsp;</button>
<%-- 				<button type="button" class="btn btn-primary" onclick="window.location = '${ctx}/user/new'">&nbsp;&nbsp;&nbsp;借阅类型管理&nbsp;&nbsp;&nbsp;</button> --%>
<%-- 				<button type="button" class="btn btn-primary" onclick="window.location = '${ctx}/user/new'">&nbsp;&nbsp;&nbsp;借书证管理&nbsp;&nbsp;&nbsp;</button> --%>
			</div>
		</div>
	
	<div class="gridTable">	
		<table width="100%"  border="0" cellspacing="0" class="table text-center">
		  <thead>			  
			  <tr>
				<th style="width:1px;"><input type="checkbox" onclick="setAllCheckboxState('items',this.checked)"></th>
				<th>序号</th>
				<th sortColumn="userName" >用户名</th>
				<th sortColumn="name" >姓名</th>
				<th sortColumn="birth" >出生年月日</th>
				<th sortColumn="gender" >性别</th>
				<th sortColumn="tel" >座机</th>
				<th sortColumn="phone" >手机</th>
				<th sortColumn="email" >email</th>
				<th sortColumn="type" >用户类型</th>
<!-- 				<th sortColumn="borrowTypeId" >借阅类型</th> -->
				<th sortColumn="state" >状态</th>
				<th style="white-space:nowrap;">操作</th>
			  </tr>			  
		  </thead>
		  <tbody>
		  	  <c:forEach items="${page.result}" var="item" varStatus="status">
			  <tr>
				<td><input type="checkbox" name="items" value="${item.userId}"></td>
				<td><c:out value='${status.count}'/></td>
				<td><c:out value='${item.userName}'/>&nbsp;</td>
				<td><c:out value='${item.name}'/>&nbsp;</td>
				<td><c:out value='${item.birthString}'/>&nbsp;</td>
				<td>
					<c:choose> 
						<c:when test="${item.gender eq 1}">男</c:when>
						<c:when test="${item.gender eq 2}">女</c:when>
					</c:choose> 
				</td>
				<td><c:out value='${item.tel}'/>&nbsp;</td>
				<td><c:out value='${item.phone}'/>&nbsp;</td>
				<td><c:out value='${item.email}'/>&nbsp;</td>
				<td>
					<c:choose> 
						<c:when test="${item.type eq 1}">老师</c:when>
						<c:when test="${item.type eq 2}">学生</c:when>
					</c:choose> 
				</td>
<%-- 				<td><c:out value='${item.borrowTypeId}'/>&nbsp;</td> --%>
				<td>
					<div class="switch switch-small">
    				<input type="checkbox" id="state_checkBox" name="state_checkBox" value='${item.userId}'
    					<c:if test="${item.state eq 1}">checked</c:if> 
    					<c:if test="${item.state eq 0}">state="false"</c:if>/>
					</div>
				</td>
				<td>
					<a href="${ctx}/user/${item.userId}">查看</a>&nbsp;&nbsp;
					<a href="${ctx}/user/${item.userId}/edit">修改</a>&nbsp;&nbsp;
<%-- 					<a href="${ctx}/user/${item.userId}" onclick="doRestDelete(this,'你确认删除?');return false;">删除</a> --%>
				</td>
			  </tr>
			  
		  	  </c:forEach>
		  </tbody>
		</table>
	
		<simpletable:pageToolbar page="${page}">
		</simpletable:pageToolbar>
		
	</div>
</rapid:override>
<rapid:override name="script">
	<script src="${ctx}/scripts/rest.js" ></script>
	<link href="<c:url value="/widgets/simpletable/simpletable.css"/>" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="<c:url value="/widgets/simpletable/simpletable.js"/>"></script>
	
	<script type="text/javascript" >
		$(document).ready(function() {
			window.simpleTable = new SimpleTable('queryForm',${page.thisPageNumber},${page.pageSize},'${pageRequest.sortColumns}');
		});

		//初始化时间控件
		var picker1 = new Pikaday(
			    {
			        field: document.getElementById('birthBegin'),
			        firstDay: 1,
			        minDate: new Date('1900-01-01'),
			        maxDate: new Date('2020-12-31'),
			        yearRange: [1900,2020]
			    });
			    
		var picker2 = new Pikaday(
			    {
			        field: document.getElementById('birthEnd'),
			        firstDay: 1,
			        minDate: new Date('1900-01-01'),
			        maxDate: new Date('2020-12-31'),
			        yearRange: [1900,2020]
			    });
		
		function setAllCheckboxState(name,state) {
			var elms = document.getElementsByName(name);
			for(var i = 0; i < elms.length; i++) {
				elms[i].checked = state;
			}
		}

		//bootstrap switch
		$("[name='state_checkBox']").bootstrapSwitch('onText','启用');
		$("[name='state_checkBox']").bootstrapSwitch('offText','禁用');
		$("input[type=checkbox][name='state_checkBox']").on('switchChange.bootstrapSwitch', function (event, state) {
			var userId = this.value;		
			if ($(this).is(":focus") == false) 
				return;
			if (state == true)
			{
				$(this).blur();
				if(confirm('确定执行启用操作？')){
					window.open("${ctx}/user/"+userId+"&1/changeState","_self");
				}
				else
					$(this).bootStrapSwitch('state', false);
			}
			if (state == false)
			{
				$(this).blur();
				if(confirm('确定执行禁用操作？')){
					window.open("${ctx}/user/"+userId+"&0/changeState","_self");
				}
				else
					$(this).bootstrapSwitch('state', true);
			}
		});
	</script>
</rapid:override>
<%@ include file="base.jsp" %>
